<template>
  <view class="main">
    <!-- 图片 -->
    <view class="top_img" @click="go">
      <image
        class="show_img"
        src="/static/img/index/home_show.png"
        mode="scaleToFill"
      />
    </view>

    <!-- 功能区 -->
    <view class="tileList">
      <view
        @click="goTile(item)"
        class="tile flex_col_center"
        v-for="(item, index) in tileList"
        :key="index"
      >
        <image class="icon" :src="item.icon"></image>
        <text class="name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 资讯 -->
    <view class="consult">
      <view class="title_bar">
        <view class="title">资讯</view>
        <navigator class="more" url="../consult/index">
          更多
          <u-icon name="arrow-right" color="#666666" size="14"></u-icon>
        </navigator>
      </view>

      <view class="consultList">
        <view
          class="consultItem"
          v-for="(item, index) in consultList"
          :key="index"
          @click="goConsultDetails(item)"
        >
          <view class="item_left">
            <view class="consult_title">{{ item.title }}</view>
            <view class="consult_info">
              <view class="consult_time">{{ item.push_date }}</view>
              <view class="reading_quantity">{{
                parseInt(item.records) > 9999
                  ? item.records.slice(0, item.records.length - 4) + "W阅读"
                  : item.records + "阅读"
              }}</view>
            </view>
          </view>
          <view class="item_right">
            <image
              class="img"
              :src="item.pic"
              mode="aspectFill"
              lazy-load
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/index/index"
></script>

<style lang="scss" scoped>
.main {
  background: #fff;

  .top_img {
    padding-top: calc(var(--status-bar-height));

    .show_img {
      display: block;
      margin: 0 auto;
      width: 690rpx;
      height: 250rpx;
      border-radius: 20rpx;
    }
  }

  .tileList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #fff;
    border-radius: 8px;
    .tile {
      margin-top: 40rpx;
      text-align: center;

      .icon {
        display: block;
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 20rpx;
      }

      .name {
        margin-top: 20rpx;
        font-size: 28rpx;
      }
    }
  }

  .consult {
    padding: 0 30rpx;
    margin-top: 43rpx;
    background-color: #fff;
    border-radius: 15rpx;

    .title_bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f1f1f1;

      .title {
        font-size: 40rpx;
        font-weight: 700;
        color: #333333;
        line-height: 42rpx;
      }

      .more {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        line-height: 42rpx;
      }
    }

    .consultList {
      .consultItem {
        margin-top: 68rpx;
        display: flex;
        justify-content: space-between;

        &:last-child {
          padding-bottom: 90rpx;
        }

        .item_left {
          width: 360rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .consult_title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
            line-height: 40rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .consult_info {
            display: flex;
            align-items: center;
            justify-content: space-between;

            color: #999999;
            font-size: 24rpx;
          }
        }

        .item_right {
          .img {
            width: 224rpx;
            height: 148rpx;
            border-radius: 10rpx;
          }
        }
      }
    }
  }
}
</style>
